<template>
  <div>
    <div class="topcontainer">
      <h4>已展示字段</h4>
      <el-button type="text" @click="joinViceTable()">设置展示字段</el-button>
    </div>
    <el-table :data="tableFieldLst" :row-style="{ height: '40px' }" :cell-style="{ padding: '0px' }"
      style="width: 100%;font-size: 10px" height="calc(100vh - 230px)">
      <el-table-column prop="tableName" label="表名称" align="center"></el-table-column>
      <el-table-column prop="tableId" label="表id" align="center"></el-table-column>
        <el-table-column label="展示类型"  prop="showType">
           <template slot-scope="scope">
             <span v-if="scope.row.showType===0">都显示</span>
              <span v-if="scope.row.showType===1">仅列表</span>
               <span v-if="scope.row.showType===2">仅详情</span>
            </template>
        </el-table-column>
      <el-table-column prop="fieldName" label="字段名称" align="center"></el-table-column>
      <el-table-column prop="fieldId" label="字段名称id" align="center"></el-table-column>
      <el-table-column prop="seqNo" label="顺序号" align="center"></el-table-column>
    </el-table>
    <el-dialog title="表单字段" :visible.sync="dialogVisible" width="900px">
      <div class="content">
        <el-form :model="queryParams" ref="form" :inline="true">
          <el-form-item label="表单名称" prop="tableId">
            <el-select v-model="queryParams.tableId" placeholder="请输入表单名称" remote reserve-keyword filterable clearable
              style="width:200px" @change="getFieldList" size="small">
              <el-option v-for="line in searchList" :key="line.tableId" :label="line.tableName" :value="line.tableId" />
            </el-select>
          </el-form-item>
        </el-form>
        <el-table :data="tableData" style="width: 100%" class="table" ref="multipleTable"
          @selection-change="handleSelectionChange" v-if="dialogVisible">
          <el-table-column type="selection" width="55"></el-table-column>
          <el-table-column prop="fieldId" label="ID" align="center"></el-table-column>
         <el-table-column prop="seqNo" label="顺序号" align="center">
           <template slot-scope="scope">
             <el-input-number v-model="scope.row.seqNo"  :min="1"  label="描述文字"></el-input-number>
             
            </template>
         </el-table-column>
          <el-table-column label="展示类型">
            <template slot-scope="scope">
              <el-select v-model="scope.row.showType" placeholder="请选择类型" size="small">
                <el-option v-for="item in options" :key="item.value" :label="item.name" :value="item.value">
                </el-option>
              </el-select>
            </template>
          </el-table-column>
          <el-table-column prop="fieldName" label="field名称" align="center"></el-table-column>
        </el-table>
        <div class="join_data">
          <template>
            <div v-for="(ele, key) in allSelect" :key="key">
              <span class="title" v-if="ele.length > 0">关联表Id为{{ key }}的字段</span>
              <div class="list">
                <template v-for="item in ele">
                  <el-tag size="small" :key="item.fieldId">
                    {{
                        item.fieldName
                    }}
                  </el-tag>
                </template>
              </div>
            </div>
          </template>
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
        <el-button type="primary" @click="submitJoin" size="mini">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import { api } from "../server/api";
export default {
  data() {
    return {
      tableId: "",
      clientHeight: 0,
      tableFieldLst: [],
      dialogVisible: false,
      searchList: [],
      tableData: [],
      allData: [],
      options:[{name:'都显示',value:0},{name:'仅列表',value:1},{name:'仅详情',value:2}],
      multipleSelection: [],
      allSelect: {},
      mainFieldId: "",
      tabidlist: [],
      queryParams: {
        tableId: ""
      }
    };
  },
  created() {
    this.clientHeight = document.documentElement.clientHeight;
    this.tableId = this.$route.query.tableId;
    this.getDatils();
  },
  methods: {
    getDatils() {
      api.stdappTableShowLst(this.tableId).then(res => {
        this.tableFieldLst = res;
      });
    },
    handleSelectionChange(row) {
      const { tableId } = this.queryParams;
      this.multipleSelection = row;
      this.$nextTick(() => {
        this.$set(this.allSelect, tableId, row);
      });
    },

    resetQuery() {
      this.queryParams = {
        tableId: ""
      };
    },
    joinViceTable() {
      this.tableData = [];
      this.dialogVisible = true;
      // console.log("lll");
      this.getSelect();
    },
    getsearchList() {
      api.stdappTableJoinLst(this.tableId).then(res => {
        console.log(res);
        this.searchList = [
          { tableId: this.tableId, tableName: this.$route.query.name }
        ];
        let obj = {};
        res.map(item => {
          obj = {
            tableId: item.foreignTableId,
            tableName: item.foreignTableName
          };
          this.searchList.push(obj);
        });
        console.log(this.searchList);
        this.$set(this.queryParams, "tableId", this.searchList[0].tableId);
        this.getFieldList();
      });
    },
    getFieldList() {
      api.stdappTableDetail(this.queryParams).then(res => {
        let { fieldLst } = res;
       
     
        this.tableData = fieldLst;
        let data = this.allSelect[this.queryParams.tableId];
         this.tableData.map(val=>{
          const findval=data.filter(value=>{
            return value.fieldId===val.fieldId
          })
           if(findval.length>0){
            console.log(findval)
            val.showType=findval[0].showType
           }else{
            val.showType=0
           }
         })
         
        if (data) {
          for (let index = 0; index < data.length; index++) {
            const element = data[index];
            const val = fieldLst.find(item => {
              return item.fieldId == element.fieldId;
            });
            setTimeout(() => {
              this.$refs.multipleTable.toggleRowSelection(val, true);
            }, 100);
          }
        } else {
          console.log("情况");
          this.$refs.multipleTable.clearSelection();
        }
      });
    },
    getSelect() {
      console.log(this.tableFieldLst, "dddddd");
      let allSelect = {};
      for (let index = 0; index < this.tableFieldLst.length; index++) {
        const element = this.tableFieldLst[index];
        const key = element.tableId;
        allSelect[key] = allSelect[key]
          ? [...allSelect[key], element]
          : [element];
      }
      this.allSelect = allSelect;
      this.getsearchList();
    },

    submitJoin() {
      const arr = [];
      //  {"mainFieldId":45, "foreignTableId":8, "foreignFieldId":46},
      for (let key in this.allSelect) {
        console.log(this.allSelect[key]);
        const fieldLst = this.allSelect[key];
        for (let index = 0; index < fieldLst.length; index++) {
          const element = fieldLst[index];
          console.log(element)
          const obj = {
            seqNo: element.seqNo,
            tableId: key,
            showInfo: 1,
            showType:element.fieldType==='IdentityKey'?0:element.showType,
            fieldId: element.fieldId
          };
          arr.push(obj);
        }
      }
      console.log(arr);
      const data = {
        tableId: this.tableId,
        pairLst: arr
      };
      api.stdappTableSetShow(data).then(res => {
        console.log(res);
        this.$message.success("展示成功");
        this.dialogVisible = false;
        this.joinTableData = [];
        this.multipleSelection = [];
        this.getDatils();
      });
    }
  }
};
</script>
<style lang="scss" scoped>
.topcontainer {
  display: flex;
  height: 60px;
  align-items: center;

  h4 {
    margin: 0 10px;
  }
}

.join_data {
  .title {
    display: inline-block;
    padding: 5px 0;
  }

  .el-tag {
    padding: 0 20px;
    margin: 5px;
  }
}

.content {
  max-height: 420px;
  overflow-y: auto;
}
</style>